@import "../../../../../common/colors.scss";
@import "../../../../../mixins/utils.scss";
@import "../../../common/var.scss";

@include theme($theme){
    .tags-view-container{
        user-select: none; 
        position: relative;
        margin-bottom: 10px;
        box-sizing: border-box;
        overflow: hidden;
        border-top: 1px solid #f6f6f6;
        background-color: #fff;
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
        display: flex !important;
        .tags-view-wrapper {
            flex: 1;
            height: 36px;
            & .tags-view-item {
              & .el-icon-close {
                width: 16px;
                height: 16px;
                vertical-align: 2px;
                border-radius: 50%;
                text-align: center;
                transition: all .3s cubic-bezier(.645, .045, .355, 1);
                transform-origin: 100% 50%;
                &:before {
                  transform: scale(.6);
                  display: inline-block;
                  vertical-align: -3px;
                }
                &:hover {
                  background-color: #b4bccc;
                  color: #fff;
                }
              }
            }
        }

        & .contextmenu {
            position: fixed;
        }

        & .tags-view__menu-border{
            display: inline-block;
            width:90px;
            & .tags-view__menu {
                position: absolute !important;
                top: 3px;
                right: 6px;
                padding: 1px 0 0 15px;
                box-sizing: border-box;
            }
        }
        

    }
}